<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 芯片列表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <!-- <el-form :model="form" label-width="120px">
                    <el-form-item label="芯片型号">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-form> -->
        <span class="c999 mr5 fs16">芯片型号</span>
        <el-input
          v-model="query.name"
          placeholder="请输入芯片型号"
          class="handle-input mr10"
        ></el-input>

        <el-select
          v-model="query.type"
          placeholder="厂家类型"
          class="handle-select mr10"
        >
          <el-option key="0" label="全部" value="全部"></el-option>
          <el-option key="1" label="AMD" value="AMD"></el-option>
          <el-option key="2" label="INTER" value="INTER"></el-option>
        </el-select>
        <el-select
          v-model="query.stock"
          placeholder="库存"
          class="handle-select mr10"
        >
          <el-option key="0" label="全部" value="全部"></el-option>
          <el-option key="1" label="有" value="有"></el-option>
          <el-option key="2" label="无" value="无"></el-option>
        </el-select>
        <!-- <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input> -->
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
      </div>
      <div class="table-title">
        <span class="mr20 fs14">设备信息列表</span>
        <span class="c999 fs14 mr20"
          >共 <span class="mr5 ml5 c409"> {{ 123 }} </span>条记录</span
        >
        <el-button type="danger" @click="handleDelete">删除</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        height="450"
        :row-style="{ height: '20px' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          prop="id"
          label="ID"
          width="55"
          align="center"
        ></el-table-column>

        <el-table-column prop="model" label="型号" width="120">
          <template #default="scope">
            <span class="c409" @click="handleEdit(scope.$index, scope.row)">{{
              scope.row.model
            }}</span>
            <!-- <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">详情
                        </el-button>
                        <el-button type="text" icon="el-icon-delete" class="red"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
        <el-table-column prop="producer" label="品牌"></el-table-column>
        <el-table-column prop="value" label="价值系数"></el-table-column>
        <!-- <el-table-column prop="dangerous" label="危险系数"></el-table-column> -->
        <el-table-column
          prop="prize"
          label="价格"
          width="300"
        ></el-table-column>
        <el-table-column prop="stock" label="库存"></el-table-column>
        <el-table-column
          prop="energyRanking"
          label="价值排名"
        ></el-table-column>

        <el-table-column prop="icBusiness" label="IC商家"></el-table-column>
        <el-table-column
          prop="energySearch"
          label="搜索次数(30天)"
        ></el-table-column>
        <el-table-column
          prop="energyCompany"
          label="搜索公司(30天)"
        ></el-table-column>
        <el-table-column
          prop="energyPrizeCompanyCount"
          label="云价格记录公司(30天)"
        ></el-table-column>
        <el-table-column prop="icStock" label="IC库存"></el-table-column>
        <!-- <el-table-column prop="packet" label="包装数量"></el-table-column> -->

        <el-table-column prop="date" label="供货日期"></el-table-column>
        <el-table-column
          prop="thirdPartyInventory"
          label="第三方库存"
        ></el-table-column>

        <!-- <el-table-column label="账户余额">
                    <template #default="scope">￥{{ scope.row.money }}</template>
                </el-table-column>
                <el-table-column label="头像(查看大图)" align="center">
                    <template #default="scope">
                        <el-image class="table-td-thumb" :src="scope.row.thumb" :preview-src-list="[scope.row.thumb]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template #default="scope">
                        <el-tag :type="
                                scope.row.state === '成功'
                                    ? 'success'
                                    : scope.row.state === '失败'
                                    ? 'danger'
                                    : ''
                            ">{{ scope.row.state }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="date" label="注册时间"></el-table-column> -->
        <!-- <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              >详情
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.page"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" v-model="editVisible" width="30%">
      <el-form label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

import { chipListData } from "./data";
import { getAllChips } from "@/service/chipList/index";

export default {
  name: "basetable",
  setup() {
    const router = useRouter();
    const query = reactive({
      type: "全部",
      name: "",
      stock: "全部",
      page: 1,
      pageSize: 10,
    });
    const tableData = ref([
      // {
      //   id: "11",
      //   model: "AD623ARZ", // 型号
      //   producer: "ADI", // 厂商
      //   value: 0, // 价值系数
      //   dangerous: 0, // 危险系数
      //   energyRanking: 0, // 价值排名
      //   energySearch: 1625, // 搜索次数(30天)
      //   energyCompany: 772, // 搜索公司(30天)
      //   energyPrizeCompanyCount: 25, // 云价格记录公司(30天)
      //   icBusiness: 98, // IC商家
      //   icStock: 252254, // IC库存
      //   packet: 98, // 包装数量
      //   prize: "报价100-499：2.27\n报价1000+：1.84", // 价格
      //   stock: 0, //库存
      //   date: "", // 供货日期
      // },
    ]);
    console.log(tableData.value, "dff");
    const pageTotal = ref(0);
    // 重置表格
    // console.log(query.type, "werr");
    const reset = () => {
      query.type = "全部";
      // (query.name = ""), (query.stock = "全部");
      query.page = 1;
      query.pageSize = 10;
    };
    // 获取表格数据
    const getData = () => {
      getAllChips({
        page: query.page,
        limit: query.pageSize,
      }).then((res) => {
        // tableData.value = res.list;
        console.log(res.data, "11111111111");
        // const arr = [133];
        pageTotal.value = res.total || 50;
        tableData.value = tableData.value.concat(res.data);
        console.log(tableData, "33333333333333333");
      });
    };
    getData();

    pageTotal.value = 50;
    tableData.value = tableData.value.concat(chipListData);
    // console.log(tableData, "33333333333333333");
    // 查询操作
    const handleSearch = () => {
      query.page = 1;
      getData();
    };
    // 分页导航
    const handlePageChange = (val) => {
      query.page = val;
      getData();
    };

    // 删除操作
    const handleDelete = (index) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          ElMessage.success("删除成功");
          tableData.value.splice(index, 1);
        })
        .catch(() => {});
    };

    // 表格编辑时弹窗和保存
    const editVisible = ref(false);
    let form = reactive({
      name: "",
      address: "",
    });
    let idx = -1;
    const handleEdit = (index, row) => {
      router.push({
        path: "/detail",
        query: {
          model: row.model,
          info: JSON.stringify(row),
        },
      });
    };
    const saveEdit = () => {
      editVisible.value = false;
      ElMessage.success(`修改第 ${idx + 1} 行成功`);
      Object.keys(form).forEach((item) => {
        tableData.value[idx][item] = form[item];
      });
    };

    return {
      query,
      tableData,
      pageTotal,
      editVisible,
      form,
      reset,
      handleSearch,
      handlePageChange,
      handleDelete,
      handleEdit,
      saveEdit,
    };
  },
};
</script>

<style scoped>
.c999 {
  color: #999;
}
.c409 {
  color: #409eff;
}
.ml5 {
  margin-left: 5px;
}
.mr5 {
  margin-right: 10px;
}
.mr20 {
  margin-right: 20px;
}
.fs14 {
  font-size: 14px;
}
.fs16 {
  font-size: 16px;
}
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.table-title {
  margin-bottom: 20px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
</style>
